/* ========================================= */
/* LAND PROCESS SECTION */
/* ========================================= */

.land-process-section {
  background: #f1f4f6;

  padding:
    110px
    20px
    120px;

  overflow: hidden;
}

/* ========================================= */
/* CONTAINER */
/* ========================================= */

.land-process-container {
  max-width: 980px;

  margin: 0 auto;
}

/* ========================================= */
/* TITLE */
/* ========================================= */

.land-process-title {
  text-align: center;

  font-size: 35px;
  line-height: 1.2;
  font-weight: 800;

  color: #17233c;

  margin-bottom: 90px;

  animation:
    processFadeUp 1s ease forwards;
}

/* ========================================= */
/* TIMELINE */
/* ========================================= */

.land-process-timeline {
  position: relative;

  display: flex;
  flex-direction: column;

  gap: 82px;
}

/* CENTER RED LINE */

.land-process-line {
  position: absolute;

  top: 0;
  bottom: 0;
  left: 50%;

  width: 2px;

  background: #d40511;

  transform: translateX(-50%);
}

/* ========================================= */
/* ITEMS */
/* ========================================= */

.land-process-item {
  position: relative;

  width: 50%;

  animation:
    processFloatUp 0.9s ease forwards;
}

/* LEFT SIDE */

.land-process-item.left {
  align-self: flex-start;
  padding-right: 40px;
  text-align: right;
}

/* RIGHT SIDE */

.land-process-item.right {
  align-self: flex-end;

  padding-left: 40px;

  text-align: left;
}

/* ========================================= */
/* CARD */
/* ========================================= */

.land-process-card {
  position: relative;
}

/* CONNECTOR LINE */

.land-process-card::before {
  content: "";

  position: absolute;

  top: 38px;

  width: 40px;
  height: 1px;

  background: #8f98a5;
}

/* LEFT CONNECTOR */

.land-process-item.left .land-process-card::before {
  right: -40px;
}

/* RIGHT CONNECTOR */

.land-process-item.right .land-process-card::before {
  left: -40px;
}

/* ========================================= */
/* BUTTON */
/* ========================================= */

.land-process-trigger {
  width: 100%;

  background: transparent;
  border: none;

  display: flex;
  align-items: center;

  gap: 20px;

  cursor: pointer;

  padding: 0;
}

/* LEFT */

.land-process-item.left .land-process-trigger {
  justify-content: flex-end;
}

/* RIGHT */

.land-process-item.right .land-process-trigger {
  justify-content: flex-start;
}

/* ========================================= */
/* LABEL */
/* ========================================= */

.land-process-label {
  font-size: 25px;
  line-height: 1.3;
  font-weight: 700;

  color: #17233c;

  transition:
    color 0.25s ease;
}

.land-process-trigger:hover .land-process-label {
  color: #d40511;
}

/* ========================================= */
/* ICON */
/* ========================================= */

.land-process-icon {
  width: 76px;
  height: 76px;

  border-radius: 50%;

  background: #f7f8f9;

  border: 1px solid #6f7987;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.land-process-icon img {
  width: 42px;
  height: 42px;

  object-fit: contain;
}

.land-process-trigger:hover .land-process-icon {
  transform: translateY(-5px);

  border-color: #d40511;

  box-shadow:
    0 10px 24px rgba(0,0,0,0.08);
}

/* ========================================= */
/* CONTENT */
/* ========================================= */

.land-process-content {
  max-height: 0;

  overflow: hidden;

  opacity: 0;

  transition:
    max-height 0.45s ease,
    opacity 0.35s ease,
    margin 0.35s ease;
}

.land-process-item.active .land-process-content {
  max-height: 300px;

  opacity: 1;

  margin-top: 22px;
}

/* LEFT CONTENT */

.land-process-item.left .land-process-content {
  text-align: right;
}

/* RIGHT CONTENT */

.land-process-item.right .land-process-content {
  text-align: left;
}

.land-process-content p {
  font-size: 19px;
  line-height: 1.9;

  color: #24324a;

  margin: 0;
}

/* ========================================= */
/* ANIMATION */
/* ========================================= */

@keyframes processFadeUp {

  from {
    opacity: 0;

    transform:
      translateY(35px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}

@keyframes processFloatUp {

  from {
    opacity: 0;

    transform:
      translateY(60px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}

/* ========================================= */
/* TABLET */
/* ========================================= */

@media (max-width: 1024px) {

  .land-process-label {
    font-size: 22px;
  }

  .land-process-content p {
    font-size: 17px;
  }

}

/* ========================================= */
/* PERFECT MOBILE TIMELINE */
/* ========================================= */

@media (max-width: 768px) {

  .land-process-section {
    padding:
      70px
      20px
      80px;
  }

  /* TITLE */

  .land-process-title {
    font-size: 26px;
    line-height: 1.2;

    text-align: left;

    margin-bottom: 55px;
  }

  /* TIMELINE */

  .land-process-timeline {
    position: relative;

    display: flex;
    flex-direction: column;

    gap: 55px;
  }

  /* RED LINE */

  .land-process-line {
    position: absolute;

    top: 0;
    bottom: 0;

    left: 31px;

    width: 2px;

    background: #d40511;

    transform: none;
  }

  /* ITEMS */

  .land-process-item {
    width: 100% !important;

    padding: 0 !important;

    text-align: left !important;

    align-self: stretch !important;

    position: relative;

    z-index: 2;
  }

  /* REMOVE DESKTOP CONNECTORS */

  .land-process-card::before {
    display: none !important;
    background-color: green;
  }

  /* TRIGGER */

  .land-process-trigger {
    width: 100%;

    display: flex !important;

    align-items: center !important;

    justify-content: flex-start !important;

    flex-direction: row !important;

    gap: 18px;

    text-align: left;

    padding: 0;

    position: relative;
  }

  /* ICON */

  .land-process-icon {
    width: 62px;
    height: 62px;

    min-width: 62px;

    border-radius: 50%;

    background: #f1f4f6;

    border: 1px solid #6f7987;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

    margin: 0;

    z-index: 3;
  }

  .land-process-icon img {
    width: 32px;
    height: 32px;

    object-fit: contain;
  }

  /* LABEL */

  .land-process-label {
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;

    color: #17233c;

    margin: 0;

    padding-top: 0;
  }

  /* CONTENT */

  .land-process-content {
    margin-left: 80px;

    margin-top: 14px;

    padding-right: 5px;

    text-align: left !important;
  }

  .land-process-item.active .land-process-content {
    margin-top: 14px;
  }

  .land-process-content p {
    font-size: 16px;
    line-height: 1.85;

    color: #24324a;

    margin: 0;

    text-align: left !important;
  }

}

/* ========================================= */
/* SMALL MOBILE */
/* ========================================= */

@media (max-width: 480px) {

  .land-process-title {
    font-size: 24px;
  }

  .land-process-item {
    padding-left: 78px !important;
  }

  .land-process-icon {
    width: 60px;
    height: 60px;
  }

  .land-process-label {
    font-size: 18px;
  }

}